<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@include file="/context/mytags.jsp"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-ui/jquery-ui.js"></script>

<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/bootstrap-table.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/tableExport.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/table-export.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/jquery.base64.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/ui/layui/layui.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/laydate.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/layer.js" type="text/javascript"></script>
 <script src="${pageContext.request.contextPath}/ui/layui/lay/modules/form.js" type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/ui/layui/lay/modules/element.js" type="text/javascript"></script>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/laydate/laydate.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-css/jquery-ui.css">
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/table/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/layui.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/global.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/layer/default/layer.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/code.css" >
<title>用户管理页面</title>
</head>
<body>
		<%@include file="/webpage/frame/top.jsp" %>
		 <div class="container">
        <h1>员工列表</h1>
        <p class="toolbar">
            <a class="create btn btn-default" href="javascript:">创建员工</a>
            <span class="alert"></span>
        </p>
        <table id="table"
               data-show-refresh="true"
               data-search="true"
               data-query-params="queryParams"
			   data-pagination="true"
               data-toolbar=".toolbar">
            <thead>
            <!-- data-show-columns="true" -->
            <tr>
                <th data-field="username">用户名</th>
                <th data-field="employeeName">职员名称</th>
                <th data-field="employeeNumber">职工号</th>
                <th data-field="roles">角色名称</th>
                <th data-field="action"
                    data-align="center"
                    data-formatter="actionFormatter"
                    data-events="actionEvents">操作</th>
            </tr>
            </thead>
        </table>
    </div>

    <div id="modal" class="modal fade">
        <div class="modal-dialog">
       
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <span class="modal-title"></span>
                    <span class='alert_input'></span>
                </div>
                 <form class="layui-form" action="">
                <div class="modal-body">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" name="username" placeholder="用户名">
                        
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" name="password" placeholder="密码">
                        
                    </div>
                    <div class="form-group">
                        <label>员工姓名</label>
                        <input type="text" class="form-control" name="employeeName" placeholder="员工姓名">
                        
                    </div>
                    <div class="form-group">
                        <label>员工号</label>
                        <input type="text" class="form-control" name="employeeNumber" placeholder="员工号">
                        
                    </div>
                 <div class="layui-form-item">
    		
    			<div class="layui-input-block">
     			 	<input name="roleIds" title="超级管理员" value="1" type="checkbox" >
      				<input name="roleIds" title="客服经理" value="2" type="checkbox" >
      				<input name="roleIds" title="客服"  value="3" type="checkbox" checked>
   			 </div>
   			 
  			</div>
                </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary submit">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<script>

    var BASE_URL = '${pageContext.request.contextPath}/userController.do?';
    var LIST_URL = BASE_URL+'getAllUser';
    var SAVE_URL = BASE_URL+'saveUser';
    var REMOVE_URL = BASE_URL+'deleteUser&id=';
    var $table = $('#table').bootstrapTable({url: LIST_URL}),
        $modal = $('#modal').modal({show: false}),
        $alert = $('.alert').hide();
        $alert_input = $('.alert_input').hide();
    $(function () {
        // create event
        
        $('.create').click(function () {
            showModal($(this).text());
        });

        $modal.find('.submit').click(function (event) {
        	
        	
        	var e=window.event || event;
        	var prevent = false
            var row = {};
            if($modal.data('id')){
            	row['id']=$modal.data('id')
            }
            $modal.find('input[name]').each(function () {
            	//校验数据
            
            	if($(this).attr('name')=='username'){
            		
            		if($(this).val()==''){
            			console.log($(this).attr('name'));
            			showAlert2('用户名不能为空','danger');
            			prevent = true;
            			return false;
            		}else if($(this).val().length>8){
            			showAlert2('用户名不能超过8个字符','danger');
            			prevent = true;
            			return false;
            		}
            		
            	}
            	
				if($(this).attr('name')=='password'){
            		
            		if($(this).val()==''){
            			console.log($(this).attr('name'));
            			showAlert2('密码不能为空','danger');
            			prevent = true;
            			return false;
            		}
            		
            	}
            	
            	
            	
            	if($(this).attr('type')!='checkbox'){
                row[$(this).attr('name')] = $(this).val();
            	}else{
            	//layui 依赖class判断	
            	if($(this).next().hasClass('layui-form-checked'))	{
            		$(this).attr('checked',true);
            			if(row[$(this).attr('name')]==undefined){
            				row[$(this).attr('name')] = $(this).val();
            			}else{
            				row[$(this).attr('name')] = row[$(this).attr('name')]+","+$(this).val();
            			}
            		
            	}
            	
            	
            	}
            });
            
            if(prevent==true){
            	
            	return false;
            }
			console.log(JSON.stringify(row));
            $.ajax({
                url: SAVE_URL,
                type:  'post',
                contentType: 'application/json',
                data: JSON.stringify(row),
                success: function () {
                    $modal.modal('hide');
                    $table.bootstrapTable('refresh');
                    showAlert(($modal.data('id') ? '更新' : '新建') + ' 员工成功!', 'success');
                },
                error: function () {
                	console.log(SAVE_URL);
                    $modal.modal('hide');
                    showAlert(($modal.data('id') ? '更新' : '新建') + ' 员工错误!', 'danger');
                }
            });
        });
    });

    function queryParams(params) {
        return {};
    }

    function actionFormatter(value) {
        return [
                '  <a class="update btn btn-default" href="javascript:">编辑</a>',
                '  <a class="remove btn btn-default" href="javascript:">删除</a>',
        ].join('');
    }

    // update and delete events
    window.actionEvents = {
        'click .update': function (e, value, row) {
            showModal($(this).attr('title'), row);
        },
        'click .remove': function (e, value, row) {
            if (confirm('你是否确定删除这个信息')) {
                $.ajax({
                    url: REMOVE_URL + row.id,
                    type: 'delete',
                    success: function () {
                        $table.bootstrapTable('refresh');
                        showAlert('删除信息成功!', 'success');
                    },
                    error: function () {
                        showAlert('删除信息失败!', 'danger');
                    }
                })
            }
        }
    };

    function showModal(title, row) {
        row = row || {
            id: '',
            username: '',
            password: '',
            employeeName: '',
            employeeNumber: '',
            roleIds:'3'
        }; // default row value

        $modal.data('id', row.id);
        $modal.find('.modal-title').text(title);
        console.log(row['roleIds']);
        for (var name in row) {
        	$input = $modal.find('input[name="' + name + '"]');
        	$row_value = row[name];
        	if($input.attr('type')=='checkbox'){
        		rowArray= $row_value.split(",");
        	
        		
        			$input.each(
        					
        					function(){
        					
        					  for(i=0;i<rowArray.length;i++){
        							
        						if($(this).val()==rowArray[i]){
        							$(this).attr('checked',true);
            						$(this).next().addClass('layui-unselect layui-form-checkbox layui-form-checked');	
            						break;
        						}else{
        							$(this).attr('checked',false);
        							$(this).next().removeClass('layui-form-checked');
        						}
        						
        						
        						}
        					}
        			
        			);
        		
        		
        	}else{
        		   $input.val($row_value);
        	}
        	
           
        		
        	
        }
        $modal.modal('show');
    }

    function showAlert(title, type) {
        $alert.attr('class', 'alert alert-' + type || 'success')
              .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
        setTimeout(function () {
            	$alert.hide();
        }, 3000);
    }
    
    function showAlert2(title, type) {
    	
    	$alert_input.attr('class', 'alert alert-' + type || 'success')
              .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
    	 setTimeout(function () {
    		 	$alert_input.hide();
         }, 3000);
        
    }
    
    
</script>
<script type="text/javascript">
layui.use(['form', 'layedit', 'laydate'], function(){
	 
	  var layer = layui.layer
	  ,layedit = layui.layedit
	  ,laydate = layui.laydate;
	  

	  
	  
	});

</script>
		<%@include file="/webpage/frame/bottom.jsp" %>
</body>
</html>